<script lang="ts" setup>
//分类
import { ref, watchEffect } from "vue";
import { IndexShowData } from "@/api/interface";
interface Props {
  data: IndexShowData[] | undefined;
  link: number;
}

defineProps<Props>();
</script>

<template>
  <section class="more-from-newsroom" v-if="data?.length !== 0">
    <div class="section-content">
      <h2 class="section-head">更多新闻</h2>
      <el-row :gutter="0" class="section-tiles">
        <el-col :md="24" :lg="12" class="tile-item" v-for="item in data">
          <div class="tile tile-list">
            <router-link :to="`/single/${item.id}`" class="tile tile-list">
              <div>
                <el-image
                  :src="item.image.url"
                  fit="cover"
                  lazy
                  class="tile__media"
                ></el-image>
              </div>
              <div class="tile__description">
                <div class="tile__head">
                  <div class="tile__category">
                    <span v-for="key in item.cat">
                      {{ key.name }}
                    </span>
                  </div>
                  <div class="tile__headline">
                    {{ item.title }}
                  </div>
                </div>
                <div class="tile__timestamp">{{ item.date }}</div>
              </div>
            </router-link>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="view-archive-wrapper">
      <router-link :to="`/category/${link}`" class="nr-cta-primary-light">
        阅读历史文章
      </router-link>
    </div>
  </section>
  <div v-else>
    <el-skeleton animated :throttle="500">
      <template #template>
        <section class="more-from-newsroom">
          <div class="section-content">
            <h2 class="section-head">
              <el-skeleton-item variant="h1" style="width: 15%" />
            </h2>
            <el-row :gutter="0" class="section-tiles">
              <el-col
                :md="24"
                :lg="12"
                class="tile-item"
                v-for="index in 6"
                :key="index"
              >
                <div class="tile tile-list">
                  <el-skeleton-item
                    variant="image"
                    class="tile__media"
                    style="height: 100%"
                  />

                  <div class="tile__description">
                    <div class="tile__head">
                      <div class="tile__category">
                        <span>
                          <el-skeleton-item variant="text" style="width: 15%" />
                        </span>
                      </div>
                      <div class="tile__headline">
                        <el-skeleton-item variant="h3" style="width: 50%" />
                        <el-skeleton-item variant="h3" style="width: 100%" />
                      </div>
                    </div>
                    <div class="tile__timestamp">
                      <el-skeleton-item variant="text" style="width: 55%" />
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="view-archive-wrapper">
            <el-skeleton-item variant="button" style="width: 15%" />
          </div>
        </section>
      </template>
    </el-skeleton>
  </div>
</template>

<style lang="less" scoped>
.more-from-newsroom {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: #fff;
  overflow: hidden;

  .section-head {
    margin-bottom: 40px;
  }
  .section-tiles {
    margin-right: -64px;
    margin-top: 0;
    justify-content: flex-start;
  }
}

.tile-item {
  display: flex;
  flex-direction: column;
  width: 457px;
  margin-bottom: 32px;
  margin-right: 0px;
  flex-grow: 1;

  .tile-list {
    border-radius: revert;
    overflow: revert;
    z-index: revert;
    position: revert;
    background-color: transparent;
    flex-direction: row;
    width: 457px;

    height: 100%;
    .tile__media {
      width: 132px;
      height: 132px;
      min-height: auto;
      flex-basis: auto;
      flex-shrink: 1;

      border-radius: 16px;
    }
    .tile__description {
      padding: 0 0 0 24px;
      justify-content: center;
      flex-basis: 0;

      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      flex-grow: 1;
      .tile__head {
        .tile__category {
          margin-bottom: 4px;

          letter-spacing: 0em;
        }
        .tile__headline {
          letter-spacing: 0em;

          font-size: 17px;
          line-height: 1.23536;
          font-weight: 700;

          -webkit-line-clamp: 6;
          -webkit-box-orient: vertical;
          display: -webkit-box;
          overflow: hidden;
        }
      }
      .tile__timestamp {
        margin-top: 8px;

        letter-spacing: 0em;
      }
    }
  }
}

.tile-item:nth-child(odd)::after {
  width: calc(100% + (32px * 2));
}

.tile-item::after {
  content: "";
  flex: 0 0 auto;
  height: 1px;
  display: block;
  background-color: #d0d0d0;
  margin-top: 32px;
}

@media only screen and (max-width: 1068px) {
  .more-from-newsroom {
    padding-top: 64px;
    padding-bottom: 64px;
    .section-tiles {
      margin-right: 0;
    }
    .tile-item {
      margin-right: 0;
      width: 100%;
      margin-bottom: 24px;
    }

    .tile-item::after {
      margin-top: 24px;
    }
    .tile-item:nth-child(odd)::after {
      width: 100%;
    }
  }
  .tile.tile-list {
    .tile__media {
      width: 132px;
      height: 132px;
      min-height: auto;
      flex-basis: auto;
      flex-shrink: 1;
    }
    .tile__description {
      padding: 0 0 0 24px;
      justify-content: center;
      flex-basis: 0;
    }
    .tile__category {
      margin-bottom: 4px;
    }
    .tile__timestamp {
      margin-top: 8px;
    }
  }
}
@media only screen and (max-width: 734px) {
  .more-from-newsroom {
    padding-top: 40px;
    padding-bottom: 52px;
    .section-head {
      margin-bottom: 24px;
    }
    .section-tiles {
      margin-right: 0;
    }
  }
  .tile.tile-list {
    flex-direction: row;
    width: 100%;
    .tile__media {
      border-radius: 12px;
    }
    .tile.tile-list .tile__description {
      padding: 0 0 0 16px;
      justify-content: center;
      flex-basis: 0;
    }
    .tile__category {
      margin-bottom: 4px;
    }
    .tile__timestamp {
      margin-top: 8px;
    }
  }
}

//补充
.tile__media .el-image img {
  height: 132px !important;
}
</style>
